<template>
    <div style="margin: 30px">
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

                <div class="block">
                    <p>菜单管理</p>
                    <el-tree
                            :data="menuList"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            @node-click="getMenuById"
                    >
                    </el-tree>
                </div>


            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addform" circle>
                       
                    </el-button>
                </el-header>

                <el-main>
                    <el-form  :model="menuForm"   class="demo-form-inline">
                        <el-form-item label="菜单">
                            <el-input v-model="menuForm.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="请求路径（url）">
                            <el-input v-model="menuForm.url" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="文件路径（path）">
                            <el-input v-model="menuForm.path" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="组件名称">
                            <el-input v-model="menuForm.component" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="图标样式">
                            <el-input v-model="menuForm.iconCls" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="激活" >
                            <el-switch v-model="menuForm.enabled"></el-switch>
                        </el-form-item>
                        <el-form-item label="父级菜单" >
                            <select-tree width="200" :options="menuList" v-model="menuForm.parentId" :props="defaultPropsSelect"/>
                        </el-form-item>
                        <el-form-item label="权限" >
                            <div>
                                <template>
                                    <div style="margin: 15px 0;">
                                        <el-checkbox-group  v-model="rolesTemp" >
                                            <el-checkbox v-for="role in roles" :label="role.id" :key="role.id">{{role.nameZh}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </template>
                            </div>
                            
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addmenuOredit">
                                <span v-if="!menuForm.id">添加</span>
                                <span v-else>修改</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>

</style>


<script>
    import SelectTree  from '@c/common/SelectTree.vue'
    import {Message} from 'element-ui'
    export default {
        name:"Menu",
        data() {
            return {
                menuList:[],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    id: 'id'
                },
                rolesTemp:[],
                roles:[],
                checkRoles:[],
                menuForm:{},
                defaultPropsSelect: {
                parent: 'parentId',   // 父级唯一标识
                value: 'id',          // 唯一标识
                label: 'name',       // 标签显示
                children: 'children', // 子级
                isIndeterminate: true,
                checkedRoles:[],
                formPlay:false
               },
            }
        },
        
        methods:{
            loadmeList(){
                this.postRequestJson('/api/tg/menu/menuTree',{'type':'inside'}).then(resp=>{
                    this.menuList=resp.data.data
                })
            },
            addform(){
                this.menuForm ={}
                this.formPlay = true
                this.rolesTemp = []
            },
            getMenuById(node){
                this.formPlay =true
                this.rolesTemp = []
                node.roles.forEach(e => {
                    this.rolesTemp.push(e.id)
                });
                this.menuForm = node
            },
            addmenuOredit(){
                this.menuForm.roleIds = this.rolesTemp
                this.postRequestJson("/api/tg/menu/addorEditMenu",this.menuForm ).then(p=>{
                    if(p.data.code==='0'){
                        Message.success(p.data.message)
                    }else{
                        Message.warning(p.data.message)
                    }
                    
                })
            },
            getRoles(){
                this.getRequest("api/tg/role/roleTree").then(p=>{
                    this.roles = p.data.data
                })
            }
        },
        created() {
            this.loadmeList()
            this.getRoles()
        },
        components: { SelectTree }

    };
</script>
